<!doctype html>
<html  lang="">
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="css/12czm.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/new.css"/>

<link rel="stylesheet" href="css/swiper.min.css">

<!-- Demo styles -->
<style>
    /*这几个千万不要移到公共css  new.css里,会和主页arrow冲突*/
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
        left: 0;
        background-image: url("img/arrowleftgrey.png")!important;
    }
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev{
        right: 0;
        background-image: url("img/arrowrightgrey.png")!important;
    }
    .swiper-button-next, .swiper-button-prev {
        outline: none;
        height: 45px;
        width: 27px!important;
        bottom: 0;
        top: unset;
    }
/*arrow结束*/

    html, body {
        position: relative;
        height: 100%;
    }
    body {
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 80%;
        height: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    .swiper-slide {
        background-size: cover;
        background-position: center;
    }
    .gallery-top {
        height: 372px;
        width: 100%;
    }
    .gallery-thumbs {
         height: 100px;
         box-sizing: border-box;
         padding-top: 10px;
     }
    .gallery-thumbs .swiper-slide {
        height: 100%;
    }
    .gallery-thumbs .swiper-slide-thumb-active {
        opacity: 1;
        border:4px solid red;
    }

</style>

</head>

<body>
<div id="body">
    <div id="bodyhead">
        <div id="bodyheadhead" class="col-12">
            <div class="col-8 relative col-xs-11 col-xs-11" id="bodyheadheadmain">
                <div id="bodyheadmainleft">您好，欢迎您浏览温州市科达阀门有限公司官方网站！</div>
                <div id="bodyheadmainright">86 577 86915677<i style="margin: 0 9px">|</i><i>联系我们</i></div>
            </div>
        </div>
        <div id="bodyheadmain" class="col-12">
            <div class="col-8 relative col-xs-11" id="bodyheadmainmain">
                <div id="bodyheadmainmainleft" class="col-5 col-xs-12">
                    <img style="max-width: 100%;" src="img/logo.png" alt="">
                </div>

                <div id="bodyheadmainmainright" class="col-7 col-xs-12">

                    <div class="navbar navbar-inverse">
                        <div class="container">
                            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <div class="navbar-collapse collapse" role="navigation" aria-expanded="false" style="height: 1px;">
                                <ul class="nav navbar-nav">
                                    <li class="col-xs-12"><a href="index.html">首页</a></li>
                                    <li class="col-xs-12"><a href="#">关于科达 </a></li>
                                    <li class="col-xs-12"><a href="new.html">新闻中心 </a></li>
                                    <li class="col-xs-12"><a href="show.html">产品展示 </a></li>
                                    <li class="col-xs-12"><a href="#">技术与服务</a></li>
                                    <li class="col-xs-12"><a href="#">在线留言 </a></li>
                                    <li class="col-xs-12"><a href="#">联系我们 </a></li>
                                </ul>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="productdetails_htmlbodyheadmain" class="col-12" style="float: unset;display: inline-block;">
            <img src="img/产品展示.jpg" alt="">
        </div>
    </div>

    <div id="bodymain">

        <div id="content2">
            <div class="col-8 relative col-xs-11">
                <div id="productdetails_htmlhead">
                    <p>
                        <i><a href="">首页</a></i>/
                        <i><a href="">产品展示</a></i>/
                        <i><a href="">产品详情</a></i>
                    </p>
                </div>
                <div id="productdetails_htmlmain">
                    <div id="productdetails_htmlmaincontent">
                            <div id="productdetails_htmlmaincontentleft" class="col-md-12 col-lg-6">


                                <!-- Swiper -->
                                <div class="swiper-container gallery-top">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide" style="background-image:url(img/content4.jpg)"></div>
                                        <div class="swiper-slide" style="background-image:url(img/content4.jpg)"></div>
                                        <div class="swiper-slide" style="background-image:url(img/Alibaba.jpg)"></div>
                                        <div class="swiper-slide" style="background-image:url(img/Alibaba.jpg)"></div>
                                        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2/)"></div>
                                        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3/)"></div>
                                        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4/)"></div>
                                        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5/)"></div>
                                        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6/)"></div>
                                        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7/)"></div>
                                        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8/)"></div>
                                        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9/)"></div>
                                        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10/)"></div>
                                    </div>
                                    <!-- Add Arrows -->

                                </div>
                                <div class="swiper-button-next swiper-button-white"></div>
                                <div class="swiper-button-prev swiper-button-white"></div>
                                <div class="swiper-container gallery-thumbs">

                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide" style="background-image:url(img/content4.jpg)"></div>
                                        <div class="swiper-slide" style="background-image:url(img/content4.jpg)"></div>
                                        <div class="swiper-slide" style="background-image:url(img/Alibaba.jpg)"></div>
                                        <div class="swiper-slide" style="background-image:url(img/Alibaba.jpg)"></div>
                                        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5/)"></div>
                                        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6/)"></div>
                                        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7/)"></div>
                                        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8/)"></div>
                                        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9/)"></div>
                                        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10/)"></div>
                                    </div>
                                </div>



                            </div>
                            <div id="productdetails_htmlmaincontentright" class="col-md-12 col-lg-6">
                                <p>不锈钢球阀食品级304卫生级手动快装直通球阀/卡箍球阀</p>
                                <ul>
                                    <li>
                                        <span>品牌</span>
                                        <i>科达</i>
                                    </li>
                                    <li>
                                        <span>型号</span>
                                        <i>DN15</i>
                                    </li>
                                    <li>
                                        <span>材质</span>
                                        <i>不锈钢</i>
                                    </li>
                                    <li>
                                        <span>连接形式</span>
                                        <i>快装</i>
                                    </li>
                                    <li>
                                        <span>结构形式</span>
                                        <i>固定球球阀</i>
                                    </li>
                                    <li>
                                        <span>公称通径</span>
                                        <i>19(mm)</i>
                                    </li>
                                    <li>
                                        <span>适用介质</span>
                                        <i>水</i>
                                    </li>
                                    <li>
                                        <span>适用介质</span>
                                        <i>水</i>
                                    </li>
                                    <li>
                                        <span>适用介质</span>
                                        <i>水</i>
                                    </li>
                                    <li>
                                        <span>适用介质</span>
                                        <i>水</i>
                                    </li>
                                    <li>
                                        <span>适用介质</span>
                                        <i>水</i>
                                    </li>
                                    <li>
                                        <span>适用介质</span>
                                        <i>水</i>
                                    </li>
                                    <li>
                                        <span>适用介质</span>
                                        <i>水</i>
                                    </li>
                                    <li>
                                        <span>适用介质</span>
                                        <i>水</i>
                                    </li>
                                    <li>
                                        <span>适用介质</span>
                                        <i>水</i>
                                    </li>
                                    <li>
                                        <span>适用介质</span>
                                        <i>水</i>
                                    </li>



                                </ul>
                                <div>
                                    <img src="img/orangeAlibaba.png" alt="">
                                </div>
                            </div>
                    </div>

                    <div id="productdetails_htmlmaincontent2">
                        <div id="productdetails_htmlmaincontent2head">
                            <div id="productdetails_htmlmaincontent2headleft">产品概述</div>
                            <div id="productdetails_htmlmaincontent2headright"></div>
                        </div>
                        <div id="productdetails_htmlmaincontent2main">
                            <p style="white-space: pre-wrap">
卫生级球阀
        品种:直通T型螺纹球阀、三通T型螺纹球阀、直通焊接球阀、直通快装球阀、三通焊接球阀、三通快装球阀、直通SMS、三通SMS、直通轻便式球阀、无滞留球阀、无积水球阀、碟式球阀等

        规格：DN15——DN150、1〞—6〞Ф12.7—Ф152.4

        连接：快装、焊接、螺纹（供选）

        属系：卫生级球阀系列

        标准：ISO、DIN、IDF、SMS、3A等

        材质：不锈钢sus304和sus316L

        质量：产品内外用高档抛光设备处理，达到表面精密度要求

        密封圈：EPDM、NBR、PTFE

        包装：纸箱/木箱包装/防震膜

        工作压力：1.0Mpa

        应用范围：广泛适用于食品、酿酒、饮料、乳制品、精细化工制药及生物工程等众多行业

        对外加工：可以按用户要求来图、来样加工非标产品

        重量：以产品理论重量为准

        壳体材料：不锈钢

        适用介质：气体、液体、蒸汽

        说明:不锈钢卫生级球阀采用SUS304、316L制作，可以满足食品、生物制药领域各种介质的特殊要求
                            </p>
                        </div>
                    </div>

                    <div id="productdetails_htmlmaincontent3">
                        <div id="productdetails_htmlmaincontent3head">
                            <div id="productdetails_htmlmaincontent3headleft">产品图片</div>
                            <div id="productdetails_htmlmaincontent3headright"></div>
                        </div>
                        <div id="productdetails_htmlmaincontent3main">
                            <img src="img/产品图片.jpg" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div id="productdetails_htmlcontent3">
        <div class="col-8 relative">
            <div id="productdetails_htmlcontent3head">
                <div id="productdetails_htmlcontent3headleft">相关产品</div>
                <div id="productdetails_htmlcontent3headright"></div>
            </div>
            <div id="productdetails_htmlcontent3main">
                <div class="fade in">
                    <ul>
                        <li class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><a href=""><div><img class="col-12" src="img/qifa.png" alt=""><p>不锈钢球阀食品级316平台卫生级阀门快 装L通换向球阀</p></div></a></li>
                        <li class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><a href=""><div><img class="col-12" src="img/qifa.png" alt=""><p>不锈钢球阀食品级316平台卫生级阀门快 装L通换向球阀</p></div></a></li>
                        <li class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><a href=""><div><img class="col-12" src="img/qifa.png" alt=""><p>不锈钢球阀食品级316平台卫生级阀门快 装L通换向球阀</p></div></a></li>
                        <li class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><a href=""><div><img class="col-12" src="img/qifa.png" alt=""><p>不锈钢球阀食品级316平台卫生级阀门快 装L通换向球阀</p></div></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="bodyfoot2">
    <div class="col-8 relative col-xs-11">
        <div class="col-6 col-xs-12">
            <img src="img/foot2logo.png" alt="" style="padding:0 22px 25px 0">
            <img src="img/Alibaba.jpg" alt="">


            <div class="navbar navbar-inverse">
                <div class="container">
                    <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <div class="navbar-collapse collapse" role="navigation" aria-expanded="false" style="height: 1px;">
                        <ul class="nav navbar-nav">
                            <li><a href="#">首页</a></li>
                            <li><a href="#">关于科达 </a></li>
                            <li><a href="#">新闻中心 </a></li>
                            <li><a href="#">产品展示 </a></li>
                            <li><a href="#">技术与服务</a></li>
                            <li><a href="#">在线留言 </a></li>
                            <li><a href="#">联系我们 </a></li>
                        </ul>

                    </div>
                </div>
            </div>

        </div>
        <div id="bodyfoot2right" class="col-lg-6 col-md-6 col-xs-11 col-sm-11" style="text-align: right; display: table; ">
            <div style="display: inline-block">
                <div style="padding-right: 47px;display: table-cell; vertical-align: middle;">
                    <i>咨询热线</i>
                    <span>0577 86915677</span>
                </div>
            </div>
            <div style="display: inline-block">
                <div style="display: table-cell;vertical-align: middle;">
                    <img src="img/m.jpg" alt="" style="float:right; ">
                </div>
            </div>
        </div>
    </div>
    </d v>
</div>
</div>
</body>

<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/swiper.js"></script>
<script>
    var throttle = function (fn, delay, atleast) {
        var timer = null;var previous = null;
        return function () {
            var now = +new Date();
            if ( !previous ) previous = now;
            if ( atleast && now - previous > atleast ) {
                fn();
                // 重置上一次开始时间为本次结束时间
                previous = now;
                clearTimeout(timer);
            } else {
                clearTimeout(timer);
                timer = setTimeout(function() {
                    fn();
                    // alert("你是谁这是哪儿")
                    previous = null;
                }, delay);
            }
        }
    };

    $(function ccc() {
        $("#productdetails_htmlmaincontentright li" ).addClass("col-4")
        $("#productdetails_htmlmaincontentright").height($("#productdetails_htmlmaincontentleft").height())

        if(window.innerWidth >996) {
            // 尾部
            $("#bodyfoot2 li,.navbar-nav li,#bodyheadmainmainright").removeClass("col-xs-12")
        }else if(window.innerWidth <996 && window.innerWidth >620) {
            $(".navbar-nav li").removeClass("col-12")
        }else if(window.innerWidth <= 620) {
            // 尾部
            $("#bodyfoot2 li,.navbar-nav li,#bodyheadmainmainright").addClass("col-xs-12")
        }


        // 底部
        for(var i=0;i<$("#productdetails_htmlcontent3 ul").find("li").length;i++) {
            $("#productdetails_htmlcontent3 ul").find("li")[i].style.padding = 0 + "px";
            $("#productdetails_htmlcontent3 ul").find("li")[i].style.paddingTop = 10+"px";
            if(window.innerWidth > 800) {
                if ((i + 1) % 4 != 0) {
                    $("#productdetails_htmlcontent3 ul").find("li")[i].style.marginRight = ($("#productdetails_htmlcontent3main").width() - $("#productdetails_htmlcontent3main").width() / 4.5 * 4) / 3 + "px";
                }
                $("#productdetails_htmlcontent3 ul").find("li")[i].style.width = $("#productdetails_htmlcontent3main").width() / 4.5 + "px";
            }else if (window.innerWidth<=800) {
                if ((i+1)%2!=0){
                    $("#productdetails_htmlcontent3 ul").find("li")[i].style.marginRight = ($("#productdetails_htmlcontent3main").width() - $("#productdetails_htmlcontent3main").width() / 2.1 * 2)+"px";
                }else if((i+1)%2 == 0) {
                    $("#productdetails_htmlcontent3 ul").find("li")[i].style.marginRight = 0+"px"
                }
                $("#productdetails_htmlcontent3 ul").find("li")[i].style.width = $("#productdetails_htmlcontent3main").width() / 2.1 +"px";
            }
        }

        //swiper
        var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 10,
            slidesPerView: 3,
            loop: true,
            freeMode: true,
            loopedSlides: 5, //looped slides should be the same
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
        });
        var galleryTop = new Swiper('.gallery-top', {
            spaceBetween: 10,
            loop:true,
            loopedSlides: 5, //looped slides should be the same
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            thumbs: {
                swiper: galleryThumbs,
            },
        });

        window.onresize = throttle(ccc, 200);
    })


</script>
</html >
